<%--
  Created by IntelliJ IDEA.
  User: 14811
  Date: 2022-4-15
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script>
        $(function(){

            $('#table').bootstrapTable({
                url: '<%=path%>/category/getInfo',
                method: 'POST',                      //请求方式（*）
                contentType: "application/x-www-form-urlencoded",
                striped: false,                      //是否显示行间隔色
                toolbar: '#toolbar',              //工具按钮用哪个容器
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,//初始化加载第一页，默认第一页,并记录
                pageSize: 5,//每页的记录行数（*）
                pageList: [1, 3, 5],//可供选择的每页的行数（*）
                sortable: false,                     //是否启用排序
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "cid",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                columns: [{
                    checkbox: true,
                    visible: true                  //是否显示复选框
                },{
                    field: 'cid',
                    title: '类型ID'
                }, {
                    field: 'cname',
                    title: '类型名称'
                },{
                    field: 'count',
                    title: '排序值',
                    sortable: true //glyphicon glyphicon-chevron-up  glyphicon glyphicon-chevron-down
                },{
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: function(value, row, index){
                        var id = row.cid;
                        return  "<a href='javascript:deleteById(" + id + ")' class='btn btn-xs green'  title='删除'><span class='glyphicon glyphicon-remove'></span></a>" +
                            "<a href='javascript:toUpdate( " + id + ")' class='btn btn-xs blue' title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                    }
                }]
            });
        })



        function insert(){
            BootstrapDialog.show({
                title: '增加',
                type: BootstrapDialog.TYPE_DANGER,//显示标题颜色
                size: BootstrapDialog.SIZE_WIDE,//设置模态窗口大小的
                closable: false,  //关闭方式 true代表点击模态窗以外或者esc按钮可以关闭窗口 false则不可以
                message: $('<div></div>').load('<%=path%>/category/toAdd'),//加载远程页面的
                buttons: [{
                    label: '取消',
                    action: function (dialog) {//点击取消按钮回调函数
                        dialog.close();
                    }
                }, {
                    label: '确定',
                    action: function (dialog) {//点击确认按钮回调函数
                        $.ajax({
                            url : "<%=path%>/category/insertInfo",
                            dataType : "json",
                            type : "post",
                            data : $("#addCategory").serialize(),
                            success : function (data) {
                                toastr.success("增加成功");
                                dialog.close();
                                $('#table').bootstrapTable("refresh");
                            },
                            error : function (e) {
                                alert("系统错误")
                                console.log(e)
                            }
                        })
                    }
                }]
            });
        }

        function toUpdate(id){
            BootstrapDialog.show({
                title: '修改',
                type: BootstrapDialog.TYPE_DANGER,//显示标题颜色
                size: BootstrapDialog.SIZE_WIDE,//设置模态窗口大小的
                closable: false,  //关闭方式 true代表点击模态窗以外或者esc按钮可以关闭窗口 false则不可以
                message: $('<div></div>').load('http://192.168.19.129:8080/category/toUpdate/' + id),//加载远程页面的
                buttons: [{
                    label: '取消',
                    action: function (dialog) {//点击取消按钮回调函数
                        dialog.close();
                    }
                }, {
                    label: '确定',
                    action: function (dialog) {//点击确认按钮回调函数
                        $.ajax({
                            url : "<%=path%>/category/updateCategory",
                            dataType : "json",
                            type : "post",
                            data : $("#updateCategory").serialize(),
                            success : function (data) {
                                toastr.success("修改成功");
                                dialog.close();
                                $('#table').bootstrapTable("refresh");
                            },
                            error : function (e) {
                                alert("系统错误")
                                console.log(e)
                            }
                        })
                    }
                }]
            });
        }

        function deleteById(id){
            if(confirm("确定删除当前角色吗")){
                $.ajax({
                    url : "http://192.168.19.129:80/category/deleteCategoryById/" + id,
                    dataType : "json",
                    type : "post",
                    success : function (data) {
                        toastr.success("删除成功");
                        $('#table').bootstrapTable("refresh");
                    },
                    error : function (e) {
                        alert("系统错误")
                        console.log(e)
                    }
                })
            }
        }

       /* $(document).on("click","#up",function () {
            var node1 = this.parentNode.parentNode;
            //alert(node1)
            console.log(node1)
            var node2 = node1.previousSibling;
            console.log(node2)
            var trParent = node1.firstChild.innerText
            var trParent1 = Number(node1.firstChild.innerText)-1
            console.log(trParent,trParent1)
            changeOps(node1,node2)
        })

        $(document).on("click","#down",function () {
            var node1 = this.parentNode.parentNode;
            //alert(node1)
            //console.log(node1)
            var node2 = node1.previousSibling;
            //console.log(node2)
            var trParent = node1.firstChild.innerText
            var trParent1 = Number(node1.firstChild.innerText)+1
            //console.log(trParent,trParent1)
            changeOps(node1,node2)
        })
        function changeOps(node1,node2) {
            var val1 = node1.firstChild.innerText;
            var val2 = node2.firstChild.innerText;
            node1.firstChild.innerText=val2
            node2.firstChild.innerText=val1

            var t1 = node1.nextSibling;
            var t2 = node2.nextSibling;
            var parent = node1.parentNode;
            if (t1)parent.insertBefore(node2,t1);
            else parent().appendChild(node2);

            if (t2)parent.insertBefore(node1,t2);
            else parent().appendChild(node1);
        }
        */
        function down() {
            var a = $('#table').bootstrapTable('getSelections');
            //console.log(a)
            if(a.length>1){
                layer.alert("最多选中一条数据或者相邻数据！")
            }else {
                var index = 0;
                // 获取选中的是第几行数据
                var allData= $("#table").bootstrapTable('getData');
                //console.log(allData)
                for (let x = 0; x < allData.length; x++) {
                    if (allData[x] == a[0]) {
                        index = x;
                    }
                }

                //console.log(index)

                if (index === allData.length-1) {
                    layer.msg("尾行数据不能下移！");
                    return;
                }
                let info = JSON.parse(JSON.stringify(allData[index]));
                var cid = parseInt(info.cid);
                if(confirm("确定移动分类吗")){
                    $.ajax({
                        url : "<%=path%>/category/downCategory?cid=" + cid,
                        dataType : "json",
                        type : "post",
                        success : function (data) {
                            toastr.success("移动成功");
                            $('#table').bootstrapTable("refresh");
                        },
                        error : function (e) {
                            alert("系统错误")
                            console.log(e)
                        }
                    })
                }



            }



        }
        function up() {
            var a = $('#table').bootstrapTable('getSelections');
            //console.log(a)
            if(a.length>1){
                layer.alert("最多选中一条数据！")
            }else {
                var index = 0;
                // 获取选中的是第几行数据
                var allData= $("#table").bootstrapTable('getData');
                console.log(allData)
                for (let x = 0; x < allData.length; x++) {
                    if (allData[x] == a[0]) {
                        index = x;
                    }
                }
                //console.log(index)
                if (index===0){
                    layer.msg("首行数据不能上移！")
                    return;
                }
                // 对info进行一次格式化处理，使更改表格数据后不影响info的值
                let info = JSON.parse(JSON.stringify(allData[index]));
                var cid = parseInt(info.cid);
                //alert(cid)
                //console.log(info)
                if(confirm("确定移动分类吗")){
                    $.ajax({
                        url : "<%=path%>/category/upCategory?cid=" + cid,
                        dataType : "json",
                        type : "post",
                        success : function (data) {
                            toastr.success("移动成功");
                            $('#table').bootstrapTable("refresh");
                        },
                        error : function (e) {
                            alert("系统错误")
                            console.log(e)
                        }
                    })
                }


            }



        }

        /**
         * 对列表项进行排序
         * @param direction 0->up 1->down
         */

        function reOrder(direction) {
            var a= $("#table").bootstrapTable('getSelections');
            if(a.length<=0){
                layer.alert("请选择需要移动的数据！")
            }else{
                // 获取选中的是第几行数据
                let index = 0;
                let allData= $("#table").bootstrapTable('getData');
                for (let x = 0; x < allData.length; x++) {
                    if (allData[x] == a[0]) {
                        index = x;
                    }
                }
                // 对info进行一次格式化处理，使更改表格数据后不影响info的值
                let info = JSON.parse(JSON.stringify(allData[index]));
                if (direction == 0) { // up
                    if (index == 0) {
                        layer.msg("首行数据不能上移！")
                        return;
                    }
                    $('#table').bootstrapTable('updateRow', {
                        index: index,
                        replace:true,
                        row: allData[index-1]
                    });
                    $('#table').bootstrapTable('updateRow', {
                        index: index-1,
                        replace:true,
                        row: info
                    });
                    // 显示确定按钮
                    $('.doReOrder').show();
                } else if (direction == 1) { // down
                    if (index == allData.length-1) {
                        layer.msg("尾行数据不能下移！");
                        return;
                    }
                    $('#table').bootstrapTable('updateRow', {
                        index: index,
                        replace:true,
                        row: allData[index+1]
                    });
                    $('#table').bootstrapTable('updateRow', {
                        index: index+1,
                        replace:true,
                        row: info
                    });
                    // 显示确定按钮
                    $('.doReOrder').show();
                }
            }
        }



    </script>
</head>
<body>
<div id="toolbar">
    <button type="button" class="btn btn-success" onclick="insert()">增加</button>
    <a href='javascript:down()' class='btn btn-xs blue' title='下移'><span class='glyphicon glyphicon-chevron-down'>下移</span></a>
    <a href='javascript:up()' class='btn btn-xs green'  title='上移'><span class='glyphicon glyphicon-chevron-up'>上移</span></a>


</div>
<table id="table"></table>
</body>
</html>

